import React from 'react';
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
import { TreeItem } from '@mui/x-tree-view/TreeItem';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { useNavigate } from 'react-router-dom';
import { Typography, Box } from '@mui/material';

const CustomTreeView = ({ 
  onItemClick,
  defaultExpanded = ['1', '2', '3'],
  showIcons = true,
  defaultExpandAll = false,
  defaultCollapseAll = false,
  toggleDashboardDrawer,
  paddingY = 0,
  showTitle = false,
  ...props
}) => {
  const navigate = useNavigate();

  const navigationMap = {
    '1-1': '/auth/login',
    '1-2': '/auth/forgot-password',
    '1-3': '/auth/resend-activation',
    '1-4': '/auth/reset-password/:email',
    '1-5': '/auth/activate/:email',
    '1-6': '/auth/register',
    
    '2-1': '/api-endpoints',
    '2-2': '/webhooks',
    '2-3': '/webhooks-usage',
    '2-4': '/experimental-apis',
    '2-5': '/callbacks',
    
    '3-1': '/dashboard',
    '3-2': '/teams',
    '3-3': '/teams/:teamId',
    '3-4': '/user-teams',
    '3-5': '/card/add',
    '3-6': '/plan',
    '3-7': '/user/edit',
    '3-8': '/account/edit',
    '3-9': '/users',
    '3-10': '/create-user',
    '3-11': '/edit-user/:userId',
    '3-12': '/user/:userId',
    
    '4-1': '/api-endpoints',
    '4-2': '/experimental-apis',
    '4-3': '/webhooks',
    '4-4': '/webhooks-usage',
    '4-5': '/callbacks',
    '4-6': '/getting-started',
    '4-7': '/overview',
    '4-8': '/overview-alt',
    
    '5-1': '/payments',
    '5-2': '/cards',
    '5-3': '/add-card',
    '5-4': '/subscriptions',
    '5-5': '/plans',
    '5-6': '/trials',
    '5-7': '/stripe-sessions',
    
    '6-1': '/features-page',
    '6-2': '/users-page',
    '6-3': '/teams-page',
    '6-4': '/dashboard-page',
    '6-5': '/discover-more',
    '6-6': '/templates',
    '6-7': '/integrations',
    '6-8': '/login-page',
    '6-9': '/routing-libraries',
    '6-10': '/subscribers',
    
    '7-1': '/admin',
    '7-2': 'toggleDashboardDrawer'
  };

  const navigatePage = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  const navigateOpen = (path) => {
    if (path === 'toggleDashboardDrawer') {
      if (toggleDashboardDrawer) {
        toggleDashboardDrawer();
      }
    } else {
      navigate(path);
      if (toggleDashboardDrawer) {
        toggleDashboardDrawer(false);
      }
    }
  };

  const getExpandedNodes = () => {
    if (defaultExpandAll) return ['1', '2', '3', '4', '5', '6', '7'];
    if (defaultCollapseAll) return [];
    return defaultExpanded || [];
  };

  const handleSelect = (event, itemId) => {
    if (onItemClick) {
      onItemClick(event, itemId);
    }

    const path = navigationMap[itemId];
    if (path) {
      if (path === 'toggleDashboardDrawer') {
        if (toggleDashboardDrawer) {
          toggleDashboardDrawer();
        }
      } else if (path.startsWith('http')) {
        navigatePage(path);
      } else {
        navigateOpen(path);
      }
    }
  };

  const icons = showIcons ? {
    defaultCollapseIcon: <ExpandMoreIcon />,
    defaultExpandIcon: <ChevronRightIcon />
  } : {};

  return (
    <Box 
      py={paddingY} 
      sx={{ 
        width: '100%', 
        display: 'flex', 
        flexDirection: 'column' 
      }}
    >
      {showTitle && (
        <Typography sx={{ fontSize: '1.1rem', color: '#888888', mb: 1 }}>
          Documentation & API
        </Typography>
      )}
      <SimpleTreeView 
        onItemClick={handleSelect}
        defaultExpanded={getExpandedNodes()}
        sx={{ 
          flexGrow: 1, 
          overflowY: 'auto',
          ...props.sx 
        }}
        {...icons}
        {...props}
      >
        <TreeItem itemId="1" label="API & Frontend">
          <TreeItem itemId="1-1" label="Login Page" />
          <TreeItem itemId="1-2" label="Forgot Password Page" />
          <TreeItem itemId="1-3" label="Resend Activation Page" />
          <TreeItem itemId="1-4" label="Reset Password Page" />
          <TreeItem itemId="1-5" label="Activate Account Page" />
          <TreeItem itemId="1-6" label="Register Page" />
        </TreeItem>
        
        <TreeItem itemId="2" label="API Only">
          <TreeItem itemId="2-1" label="API Endpoints Documentation" />
          <TreeItem itemId="2-2" label="Webhooks Documentation" />
          <TreeItem itemId="2-3" label="Webhooks Usage Guide" />
          <TreeItem itemId="2-4" label="Experimental APIs" />
          <TreeItem itemId="2-5" label="Callbacks Documentation" />
        </TreeItem>
        
        <TreeItem itemId="3" label="Private Routes">
          <TreeItem itemId="3-1" label="Dashboard" />
          <TreeItem itemId="3-2" label="Teams" />
          <TreeItem itemId="3-3" label="Team Details" />
          <TreeItem itemId="3-4" label="User Teams" />
          <TreeItem itemId="3-5" label="Add Card" />
          <TreeItem itemId="3-6" label="Plan" />
          <TreeItem itemId="3-7" label="Edit User" />
          <TreeItem itemId="3-8" label="Edit Account" />
          <TreeItem itemId="3-9" label="Users" />
          <TreeItem itemId="3-10" label="Create User" />
          <TreeItem itemId="3-11" label="Edit User ID" />
          <TreeItem itemId="3-12" label="User Profile" />
        </TreeItem>
        
        <TreeItem itemId="4" label="Documentation">
          <TreeItem itemId="4-1" label="API Endpoints" />
          <TreeItem itemId="4-2" label="Experimental APIs" />
          <TreeItem itemId="4-3" label="Webhooks" />
          <TreeItem itemId="4-4" label="Webhooks Usage" />
          <TreeItem itemId="4-5" label="Callbacks" />
          <TreeItem itemId="4-6" label="Getting Started" />
          <TreeItem itemId="4-7" label="Overview" />
          <TreeItem itemId="4-8" label="Overview Alt" />
        </TreeItem>
        
        <TreeItem itemId="5" label="Payment & Subscription">
          <TreeItem itemId="5-1" label="Payments" />
          <TreeItem itemId="5-2" label="Cards" />
          <TreeItem itemId="5-3" label="Add Card" />
          <TreeItem itemId="5-4" label="Subscriptions" />
          <TreeItem itemId="5-5" label="Plans" />
          <TreeItem itemId="5-6" label="Trials" />
          <TreeItem itemId="5-7" label="Stripe Sessions" />
        </TreeItem>
        
        <TreeItem itemId="6" label="Additional Pages">
          <TreeItem itemId="6-1" label="Features Page" />
          <TreeItem itemId="6-2" label="Users Page" />
          <TreeItem itemId="6-3" label="Teams Page" />
          <TreeItem itemId="6-4" label="Dashboard Page" />
          <TreeItem itemId="6-5" label="Discover More" />
          <TreeItem itemId="6-6" label="Templates" />
          <TreeItem itemId="6-7" label="Integrations" />
          <TreeItem itemId="6-8" label="Login Page" />
          <TreeItem itemId="6-9" label="Routing Libraries" />
          <TreeItem itemId="6-10" label="Subscribers" />
        </TreeItem>
        
        <TreeItem itemId="7" label="Admin & Controls">
          <TreeItem itemId="7-1" label="Admin" />
          <TreeItem itemId="7-2" label="Close Menu" />
        </TreeItem>
      </SimpleTreeView>
    </Box>
  );
};

export default CustomTreeView;